import {
    forgetPassWordUsingPost,
    userLoginByEmailUsingPost,
    userRegisterUsingPost
} from '@/services/openAPI-backend/userController';
import {
    LockOutlined,
    MobileOutlined,
    UserOutlined,
    MailOutlined,
} from '@ant-design/icons';
import {LoginForm, ProFormCaptcha,  ProFormText} from '@ant-design/pro-components';
import { FormattedMessage, Helmet,  history, useIntl } from '@umijs/max';
import {  Modal, message,Card,Row, Col } from 'antd';
import React, { useState } from 'react';
import Settings from '../../../../config/defaultSettings';
import {sendSimpleMessageUsingPost} from "@/services/openAPI-backend/fasongyoujianjiekou";
import {sendSimpleMessageUsingPost1} from "@/services/openAPI-backend/sendMailLoginController";
const { confirm } = Modal;
import {keyframes} from "antd-style";
const fadeAndScaleIn = keyframes`
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
      `;
const Changepass: React.FC = () => {
    const intl = useIntl();

    const handleSubmit = async (values: API.UserForgetPasswordRequest) => {
        try {
            // 注册
            const res = await forgetPassWordUsingPost({ ...values });
            if (res.data) {
                confirm({
                    title: '修改成功，请重新登录',
                    okText: '确定',
                    cancelText: '取消',
                    open: true,
                    onOk() {
                        history.push('/user/login');
                    },
                    onCancel() {
                        return;
                    },
                });
            }
        } catch (error) {
            const defaultLoginFailureMessage = intl.formatMessage({
                id: 'pages.login.failure',
                defaultMessage: '密码修改失败，请重试！',
            });
            console.log(error);
            message.error(defaultLoginFailureMessage);
        }
    };

    return (
        <div
            style={{
                height: '100vh',
                width: '100%',
                backgroundPosition: 'center',
                backgroundRepeat: 'no-repeat',
                backgroundSize: '100% auto',
    animation: `${fadeAndScaleIn} 1s ease-in-out`,
                backgroundImage:
                    'url(https://openapi--bucket.oss-cn-beijing.aliyuncs.com/3d41f709296743ab1755c6070d941306.jpg)',
            }}
        >
            <Helmet>
                <title>
                    {intl.formatMessage({
                        id: 'menu.register',
                        defaultMessage: '密码更换页',
                    })}
                    - {Settings.title}
                </title>
            </Helmet>
            <div
                style={{
                    flex: '1',
                    padding: '32px 0',
                }}
            >
                <Card style={{marginTop:100,height:'100%',width:'60%',margin:'0 auto',backgroundImage:'url(https://pic3.zhimg.com/v2-09673cc4e1174a4c77e32ee1237bc46e_r.jpg)'}}>
                    <Row gutter={0}>
                        <Col span={12}><Card style={{display:'flex',justifyContent:'center',alignItems:'center',height:'100%',width:'100%',borderRadius:'20px',backgroundSize:'100% 5000%',borderRadius:'20px',
                            backgroundRepeat:'no-repeat',backgroundImage:'url(https://tse3-mm.cn.bing.net/th/id/OIP-C.8GE8CYOybbAGymLLvV7KcAHaNK?rs=1&pid=ImgDetMain)'
                        }} ><p style={{fontSize:'80px',fontWeight:'bold',color:'white',textAlign:'center'}}>E-API</p><br/>
                            <p style={{fontSize:'64px',fontWeight:'bold',color:'white',textAlign:'center'}}>简单轻量的调用体验</p></Card>
                        </Col>
                        <Col span={12}>
                            <Card style={{width:'100%',height:'100%',borderRadius:'20px',backgroundSize:'100% 5000%',borderRadius:'20px',}}>
                                <LoginForm
                                    contentStyle={{
                                        minWidth: 280,
                                        maxWidth: '75vw',
                                    }}
                                    submitter={{
                                        searchConfig: {
                                            submitText: '提交',
                                        },
                                        submitButtonProps: {
                                            style: {
                                                width: '100%',
                                            },
                                        },
                                        resetButtonProps: false,
                                    }}

                                    title="修改密码"
                                    subTitle={intl.formatMessage({ id: 'pages.layouts.userLayout.title' })}
                                    onFinish={async (values) => {
                                        await handleSubmit(values as API.UserRegisterRequest);
                                    }}
                                >
                                    <>
                                        <ProFormText
                                            name="userAccount"
                                            fieldProps={{
                                                size: 'large',
                                                prefix: <UserOutlined />,
                                            }}
                                            placeholder={intl.formatMessage({
                                                id: '1',
                                                defaultMessage: '用户名',
                                            })}
                                            rules={[
                                                {
                                                    required: true,
                                                    message: <FormattedMessage id="1" defaultMessage="请输入用户名!" />,
                                                },
                                            ]}
                                        />
                                        <ProFormText.Password
                                            name="userPassword"
                                            fieldProps={{
                                                size: 'large',
                                                prefix: <LockOutlined />,
                                            }}
                                            placeholder={intl.formatMessage({
                                                id: '1',
                                                defaultMessage: '新密码',
                                            })}
                                            rules={[
                                                {
                                                    required: true,
                                                    message: <FormattedMessage id="1" defaultMessage="请输入密码！" />,
                                                },
                                            ]}
                                        />
                                        <ProFormText.Password
                                            name="newPassword"
                                            fieldProps={{
                                                size: 'large',
                                                prefix: <LockOutlined />,
                                            }}
                                            placeholder={intl.formatMessage({
                                                id: '1',
                                                defaultMessage: '再次输入新密码',
                                            })}
                                            rules={[
                                                {
                                                    required: true,
                                                    message: <FormattedMessage defaultMessage="请再次输入密码" />,
                                                },
                                            ]}
                                        />
                                        <ProFormText
                                            name="userPhone"
                                            fieldProps={{
                                                size: 'large',
                                                prefix: <MobileOutlined />,
                                            }}
                                            placeholder={intl.formatMessage({
                                                id: '1',
                                                defaultMessage: '请输入关联手机号',
                                            })}
                                            rules={[
                                                {
                                                    required: true,
                                                    message: <FormattedMessage defaultMessage="请输入手机号！" />,
                                                },
                                            ]}
                                        />
                                        <ProFormText
                                            fieldProps={{
                                                size: 'large',
                                                prefix: <MailOutlined />,
                                            }}
                                            name="emailAddress"
                                            placeholder={intl.formatMessage({
                                                id: '1',
                                                defaultMessage: '请输入关联邮箱',
                                            })}
                                            rules={[
                                                {
                                                    required: true,
                                                    message: (
                                                        <FormattedMessage
                                                            id="1"
                                                            defaultMessage="请输入邮箱！"
                                                        />
                                                    ),
                                                },
                                            ]}
                                        />
                                        <ProFormCaptcha
                                            fieldProps={{
                                                size: 'large',
                                                prefix: <LockOutlined />,
                                            }}
                                            captchaProps={{
                                                size: 'large',
                                            }}
                                            phoneName="emailAddress"
                                            name="identifyCode"
                                            rules={[
                                                {
                                                    required: true,
                                                    message: '请输入验证码',
                                                },
                                            ]}
                                            placeholder="请输入验证码"
                                            // 如果需要失败可以 throw 一个错误出来，onGetCaptcha 会自动停止
                                            // throw new Error("获取验证码错误")
                                            onGetCaptcha={async (phone) => {
                                                await sendSimpleMessageUsingPost1({
                                                    sendTo: phone,
                                                })
                                                message.success(` ${phone} 验证码发送成功!`);
                                            }}
                                        />
                                    </>
                                </LoginForm>
                            </Card>
                        </Col>
                    </Row>

                </Card>
            </div>
        </div>
    );
};

export default Changepass;
